<template>
    <div class="footer">
      <p>总任务数: {{ items.length }}</p>
      <p>完成任务数: {{ completedCount }}({{ completionRate }})</p>
    </div>
</template>

<script>
    export default {
        name: 'count',
        props: {
            items: {
                type: Array,
                required: true
            }
        },
        computed: {
            completedCount() {
                return this.items.filter(item => item.over).length;
            },
            completionRate() {
                if (this.items.length === 0) return '0%';
                return ((this.completedCount / this.items.length) * 100).toFixed(0) + '%';
            }
        }
      }
</script>

<style>
  .footer {
    display: flex;
    align-self: center;
  }
  .footer p {
    margin: 0 10px;
    font-size: 16px;
    color: #666;
  }
  .footer p:first-child {
    margin-right: auto;
  }
</style>